<template>
    <div class="main-box">
        <Header />
        <div class="cell-box">
            <div class="item" @click="$router.push(`/news/${index}`)" v-for="(item,index) in itemList" :key="index">
                <div class="left">
                    <img slot="icon" :src="item.img" width="30px" height="50%">
                </div>
                <div class="right">
                    <div class="right-top">{{item.title}}</div>
                    <DataTime  :date="item.time" :clickNum="item.clickNum" />
                </div>
               
            </div>
        </div>
        
    </div>
</template>

<script>
import DataTime from '../DataTime.vue'
import Header from '../Header/Header.vue'
export default {
  components: { DataTime, Header },
    name:'news',
    data(){
        return {
            itemList:[
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:1
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:1
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:2
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:2
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:2
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:2
                },
                 {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:4
                },
                {
                    img:"../../../static/img/1.png",
                    title:'买房还是炒股,2015年买房无法拒绝的5大理由',
                    time:'2015-02-16 11:12:12',
                    clickNum:100
                },
            ],
        }
    },
    mounted(){
        console.log(this.$router)
    }
}
</script>

<style scoped>
    .cell-box{
        margin-top: 6vh;
        margin-bottom: 8vh;
    }
    .item{
        display: flex;
        justify-content: space-evenly;
        margin: 5px 0px;
        border-bottom: 1px solid #eee;
    }
    .left{
        height: 42px;
        line-height: 42px;
    }
    .right{
        display: flex;
        flex-flow: column;
        justify-content: space-between;
    }
    .right-top{
        width: 96%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        color: black;
        font-weight: bold;
    }
    .right-bottom{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: cadetblue;
    }
</style>